<template>
  <div ref="getMaterierInfo">
    <el-table :span-method="objectSpanMethod" :data="tableData" border style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="50" />
      <el-table-column
        v-for="item in column"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        align="center"
        :width="item.width"
      >
        <template slot-scope="scope">
          <span
            class="header-tooltip"
            style="width: 100%;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;display: block;"
            :title="scope.row[item.prop]"
          >{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    name: 'CheckMaterialTable',
    props: {
        tableData: {
            type: Array,
            default: () => []
        },
        column: {
            type: Array,
            default: () => []
        },
        typeName: {
            type: String,
            default: ''
        },
        spanName: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            mergeArr: []
        }
    },
    methods: {
        // 合并单元格方法
        getSpanArr(data, key) {
            let count = 0 // 需要合并行的起始位置
            const arr = []
            data.forEach((item, index) => {
                if (index === 0) {
                    arr.push(1)
                } else {
                    if (item[key] === data[index - 1][key]) {
                        arr[count] += 1
                        arr.push(0)
                    } else {
                        count = index
                        arr.push(1)
                    }
                }
            })
            return arr
        },
        getRowArr(arr, rowIndex) {
            if (arr[rowIndex]) {
                return [arr[rowIndex], 1]
            } else {
                return [0, 0]
            }
        },
        getTable() {
            this.mergeArr = this.getSpanArr(this.tableData, this.typeName)
        },
        objectSpanMethod({ rowIndex, columnIndex }) {
            let rowspan = []
            switch (this.spanName) {
                case 'MaterialBinding':
                    rowspan = [1, 2, 3, 4, 5, 6]
                    break
                case 'SerieceBinding':
                    rowspan = [1, 2, 3, 4]
                    break
                case 'SuppliedMaterials':
                    rowspan = [1, 2, 3]
                    break
                default:
                    break
            }
            if (rowspan.includes(columnIndex) && this.mergeArr.length > 0) {
                return this.getRowArr(this.mergeArr, rowIndex)
            }
        }
    }
}

</script>
